<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的收益</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="Cache" content="no-cache">

    <link rel="stylesheet" href="/sui/css/sm.min.css">
    <link rel="stylesheet" href="/sui/css/sm-extend.min.css">

    <!--    引用阿里图标库-->
    <link href="/css/iconfont.css" type="text/css" rel="stylesheet"/>

</head>
<body>

<div class="page-group">
    <!-- 单个page ,第一个.page默认被展示-->
    <div class="page">
        <!-- 标题栏 -->
        <header class="bar bar-nav">
            <a  href="/index" class="external button button-link button-nav pull-left">
                <span class="icon icon-left"></span>
                返回
            </a>
        </header>

        <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-distance="100" data-ptr-distance="55">
                <!-- 默认的下拉刷新层 -->
            <div class="wrapper">
                <div class="face_param">
                    <a class="shaixuan" style="color: #8f8f90;margin-left: 0.5rem"> 筛选<i class="iconfont icon-f11 face_icon_sx"></i></a>

                    <div class="face_query">
                        <p>类型</p>
                        <ul class="face_query_ul">
                            <input class="face_query_input" type="hidden"  face_param_name="type"/>
                            <li option_value="">全部<i class="iconfont icon-xuanze face_query_input_ico"></i></li>
                            <li option_value="1">用户消费<i class="iconfont icon-xuanze face_query_input_ico"></i></li>
                            <li option_value="2">商家推荐<i class="iconfont icon-xuanze face_query_input_ico"></i></li>
                            <li option_value="3">设备分佣<i class="iconfont icon-xuanze face_query_input_ico"></i></li>
                            <li option_value="4">代理商推荐<i class="iconfont icon-xuanze face_query_input_ico"></i></li>
                        </ul>

                        <p>时间</p>
                        <div class="timeConter">
                            <input class="face_query_input" type="text"  face_param_name="startTime" id='start_time'/>
                            <b>-</b>
                            <input class="face_query_input" type="text"  face_param_name="endTime" id="end-time"/>
                        </div>
                        <div class="face_query_opt">
                            <span class="reset_btn">重置</span>
                            <span class="search_btn">确定</span>
                        </div>
                    </div>


                </div>
            </div>


                <div class="pull-to-refresh-layer" >
                    <div class="preloader"></div>
                    <div class="pull-to-refresh-arrow"></div>
                </div>

                <div class="space_tip"></div>

                <div class="list-block cards-list" >
                    <ul>

                    </ul>
                </div>

                <div class="list-block ">

                    <div class="no-data" style="display: none;height:calc(100vh - 10.0867rem);overflow: hidden">
                        <div class="no-record"></div>
                        <div class="wenzi">
                            <span>当前暂无记录</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="infinite-scroll-preloader"  style="display:none">
                <div class="preloader"></div>
            </div>
    </div>
    <link href="/css/face/face_query.css" type="text/css" rel="stylesheet" />
    <script src="/js/util/dateFormat.js"></script>
    <script type='text/javascript' src='/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/sui/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/sui/js/sm-extend.min.js' charset='utf-8'></script>
    <script>

        var falg=true;

        var pageNo=1;

        var pageSize=10;
        // 上次加载的序号
        var lastIndex = 0;
        // 加载flag
        var loading = false;

        //最大加载数量
        var maxItems=0;

        var removeFlag=false;


        var startTime = new Date().Format("yyyy-MM-dd");


        $("#start_time").val(startTime);

        $("#start_time").calendar({
            value: [startTime]
        });
        $("#end-time").calendar({

        });


        $.initPullToRefresh(".pull-to-refresh-content");

        $(document).on('refresh', '.pull-to-refresh-content',function(e) {

            if (loading) {
                return;
            }
            // 设置flag
            loading = true;



            setTimeout(function () {
                init_datalist();
            },500);

        });

        function init_datalist() {
            pageNo=1;
            $('.cards-list .card').remove();
            addItems(1,pageSize);
            $.pullToRefreshDone('.pull-to-refresh-content');
        }
        //刷新页面
        function refreshPage(pageNo, pageSize){
            addItems(pageNo, pageSize);
        }
        function addItems(pageNo, pageSize) {
             var  param =  getQueryParam();
             param["pageNo"]=pageNo,
             param["pageSize"]=pageSize;
            // 生成新条目的HTML
            if(falg){
                falg=false;
                $.ajax({
                    "url": "/income/queryData",
                    "type": "POST",
                    async:false,
                    data:param,
                    success:function (result) {
                        falg=true;
                        maxItems=result.recordsTotal;

                        var data=result.data;

                        console.log(data);

                        if(data.length==0){

                            $(".no-data").css('display','block');
                            return;
                        }else{
                            $(".no-data").css('display','none');
                        }
                        for(var i=0;i<data.length;i++) {
                            var income_info =data[i];
                                var incomeType='其他';
                                if(income_info.type==1){
                                    incomeType='用户消费'
                                }else if(income_info.type==2){
                                    incomeType ='商家推荐'
                                }else if(income_info.type==3){
                                    incomeType = '设备分佣';
                                }else if(income_info.type==4){
                                    incomeType = '代理商推荐';
                                }

                            var html = '';
                            html+= '<li class="card">' +
                                      '<div class="card-content">' +
                                          '<div class="item-content">'+
                                              '<div class="item-media">'+
                                                  '<span>'+'金额:'+'</span>'+
                                                  '<span>'+(income_info.money/100)+'元</span>'+
                                              '</div>'+
                                              '<div class="item-media">'+
                                               '<span>'+'类型:'+'</span>'+
                                               '<span>'+incomeType+'</span>'+
                                              '</div>'+
                                          '</div>'+
                                          '<div class="card-footer">'+
                                            '<span>'+'创建时间:'+income_info.createdTime+'</span>' +
                                          '</div>' +
                                      '</div>' +
                                '</li>';
                            $('.cards-list ul').append(html);
                        }

                        lastIndex = $('.cards-list .card').length;
                        removeFlag=false;
                        loading = false;
                    }
                })
            }

        }
        // 注册'infinite'事件处理函数
        $(document).on('infinite', '.infinite-scroll-bottom',function(e) {
            // 如果正在加载，则退出
            if (loading) {
                return;
            }
            // 设置flag
            loading = true;
            if (lastIndex >= maxItems) {

                if (maxItems != 0) {
                    $('.infinite-scroll-preloader').hide();
                    setTimeout(function () {
                        loading = false;
                        $.toast("已经到底了");
                    }, 500)
                }
                return;
            }
            pageNo++;
            $('.infinite-scroll-preloader').show();
            setTimeout(function () {
                refreshPage(pageNo,pageSize);
                $('.infinite-scroll-preloader').hide();
                $.refreshScroller();
            },500)
        });

        $(document).ready(function () {
            // 点击筛选开始
            var i=0;
            $('.shaixuan').on("click",function () {
                if(i==0){
                    $('.face_query').show();
                    $('.face_param .face_icon_sx').removeClass('icon-f11').addClass('icon-f111');
                    $('.shaixuan').css('color','#0894ec');
                    i=1;
                }else {
                    $('.face_query').hide();
                    $('.face_param .face_icon_sx').removeClass('icon-f111').addClass('icon-f11');
                    $('.shaixuan').css('color','#8f8f90');
                    i=0;
                }
            });
            // 点击筛选结束

            $('.search_btn').on('click',function () {
                $('.face_param .face_icon_sx').removeClass('icon-f111').addClass('icon-f11');
                $('.shaixuan').css('color','#8f8f90');
                $('.face_query').hide();
                i=0;
                init_datalist();
            });
            $('.reset_btn').on('click',function () {
                $('.face_query_ul li').css({'background':'#f5f5f5',"color":"#000"});
                $('.face_query_ul li').children("i").css('display','none');
            });
            // 点击选择开始
            $('.face_query_ul li').on('click',function () {

                if( $('.face_query_ul li').eq($(this).index()-1)){
                    $('.face_query_ul li').eq($(this).index()-1).css({'background':'#e1f2fd',"color":"#108ee9"})
                        .siblings().css({'background':'#f5f5f5',"color":"#000"});
                    var option_value =  $(this).attr("option_value");
                    $(".face_query_ul .face_query_input").val(option_value);
                }

                $('.face_query_ul li').eq($(this).index()-1).children('i').css('display','block');
                $('.face_query_ul li').eq($(this).index()-1).siblings().children("i").css('display','none');
            });
            // 点击选择结束
            refreshPage(pageNo,pageSize);
        });



        /**
         * 获取查询参数
         */
        function  getQueryParam() {

            var param = {};

            $(".face_query .face_query_input").each(function () {

              var query_input = $(this);

              var param_name = query_input.attr("face_param_name");
              var param_value =query_input.val();

                param[param_name]=param_value;
            });


            return param;
        }
        $.init();
    </script>

</div>




</body>
</html>
